import React, { useState } from "react";
import { Modal, Form, Input, Button, Typography } from "antd";
import styles from "./index.module.less";

const { Text } = Typography;

interface BranchModalProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: any) => void;
  startPoint?: string;
}

const BranchModal: React.FC<BranchModalProps> = ({
  visible,
  onCancel,
  onSubmit,
  startPoint = "master 2025-05-06",
}) => {
  const [form] = Form.useForm();

  const handleOk = () => {
    form.validateFields().then((values) => {
      onSubmit(values);
      form.resetFields();
    });
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title="新建分支名称"
      open={visible}
      onCancel={handleCancel}
      footer={[
        <Button key="cancel" onClick={handleCancel} data-oid="rx80q:i">
          取消
        </Button>,
        <Button
          key="submit"
          type="primary"
          onClick={handleOk}
          data-oid="es1odvm"
        >
          新建
        </Button>,
      ]}
      className={styles.modal}
      data-oid="-5z:-c5"
    >
      <Form form={form} layout="vertical" data-oid="ny50m-u">
        <Form.Item label="起点分支/标签/提交" data-oid="f1aeaod">
          <Text data-oid="3i8z2i_">{startPoint}</Text>
        </Form.Item>
        <Form.Item
          label="新建分支名称"
          name="branchName"
          rules={[{ required: true, message: "请输入新的分支名称" }]}
          data-oid="5h5nw8b"
        >
          <Input placeholder="请输入新的分支名称" data-oid="rf-074c" />
        </Form.Item>
        <Form.Item
          label="分支描述"
          name="branchDescription"
          rules={[{ max: 128, message: "分支描述不能超过128个字符" }]}
          data-oid="mvj9bw0"
        >
          <Input.TextArea
            placeholder="请输入分支备注信息，不能超过128个字符。"
            maxLength={128}
            showCount
            data-oid=".:ej_va"
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default BranchModal;
